<template>
	<el-menu class="el-menu-vertical-demo" style="width:auto;padding: 0 3%;" :collapse="true" @select="NavFunc">
		<el-sub-menu index="1">
			<template #title>分类</template>
			<div style="padding-left: 10%;">
				<el-menu-item index="1-1">C++</el-menu-item>
				<el-menu-item index="1-2">Python</el-menu-item>
				<el-menu-item index="1-3">Java</el-menu-item>
			</div>
		</el-sub-menu>
		<el-menu-item index="2">点赞</el-menu-item>
		<el-menu-item index="3">关注</el-menu-item>
		<el-menu-item index="4">评论</el-menu-item>
		<el-menu-item index="5">收藏</el-menu-item>
		<el-menu-item index="6">订阅</el-menu-item>
		<el-menu-item index="7">历史</el-menu-item>

		<el-dialog v-model="GetBlogByCollectionVisible" title="收藏博客" width="600">
			<el-select v-model="collectionOptionValue" value-key="id" placeholder="Select" style="width: 240px">
				<el-option v-for="item in collectionOptions" :key="item.id" :label="item.collectionName"
					:value="item" />
			</el-select>
			<el-button type="primary" @click="GetBlogByCollection" style="margin-left: 30%">查询</el-button>
		</el-dialog>
	</el-menu>
</template>

<script setup>
import router from '@/router';
import { Menu as IconMenu, } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { IsLoginIn } from '../functions/IsLoginIn.vue';
import axios from 'axios'

// const router = useRouter();

const GetBlogByCollectionVisible = ref(false);

const collectionOptions = ref([]);

const collectionOptionValue = ref();

const props = defineProps({
	data: Function,
	ChangeUrl: Function
});

function Print() {
	console.log(collectionOptionValue.value.id);
}

function GetBlogByCollection() {
	props.ChangeUrl('/api/collection/getOneCollection', collectionOptionValue.value.id);
	GetBlogByCollectionVisible.value = false;
}

function GetUserCollection() {
	axios
		.post('/api/collection/getUserCollection', {
			user_id: localStorage.getItem('userId')
		}, {
			headers: {
				'HOSHINO_T_KK': localStorage.getItem('userToken'),
			}
		})
		.then(response => {
			console.log(response);
			collectionOptions.value = response.data.data;
			// console.log(collectionOptions.value);
		})
		.catch(function (error) { // 请求失败处理
			console.log(error);
		});
}

function GetSubscribeCollection() {
	axios
		.post('/api/subscribe/getSubscribe', {
			user_id: localStorage.getItem('userId')
		}, {
			headers: {
				'HOSHINO_T_KK': localStorage.getItem('userToken'),
			}
		})
		.then(response => {
			console.log(response);
			collectionOptions.value = response.data.data;
			// console.log(collectionOptions.value);
		})
		.catch(function (error) { // 请求失败处理
			console.log(error);
		});
}

function NavFunc(index, indexPath) {
	switch (index) {
		case '1-1':
			router.push({ path: '/search', query: { keyword: 'C++' } });
			break;
		case '1-2':
			router.push({ path: '/search', query: { keyword: 'Python' } });
			break;
		case '1-3':
			router.push({ path: '/search', query: { keyword: 'Java' } });
			break;
		case '2':
			IsLoginIn();
			props.ChangeUrl('/api/blogLike/getUserLikes');
			break;
		case '3':
			IsLoginIn();
			props.ChangeUrl('/api/blog/getLocalBlog');
			break;
		case '4':
			IsLoginIn();
			props.ChangeUrl('/api/comment/getReplyBlogInfo');
			break;
		case '5':
			IsLoginIn();
			GetBlogByCollectionVisible.value = true;
			GetUserCollection();
			break;
		case '6':
			IsLoginIn();
			GetBlogByCollectionVisible.value = true;
			GetSubscribeCollection();
			break;
		case '7':
			IsLoginIn();
			props.ChangeUrl('/api/history/get');
			break
		default:
			console.log('未知菜单项被选中', index);
	}
}
</script>

<style scoped>
a {
	text-decoration: none;
}

.router-link-active {
	text-decoration: none;
}
</style>